﻿@using ZhongKeSite.Entity;
@{
    Company company = ViewBag.CompanyInfo;
}
@model SupportInfo

<div class="banner banner-contact wow fadeInUp">
    <div class="container">
        <h1 class="title-page">支持</h1>
        <p class="des">来自SANANBIO专家的服务与支持</p>
    </div>
</div>
<div class="page page-support">
    <section class="s1 container">
        <div class="title-section wow fadeInUp">
            <h2>FQAs</h2>
        </div>
        <div class="tab-container">
            <div class="tab-header">
                @for (int i = 0; i < Model.FAQsInfoList.Count; i++)
                {
                    <li class="@(i==0?"active":"")">@Model.FAQsInfoList[i].Category.CategoryName </li>
                }
            </div>
            <div class="tab-body">
                @for (int i = 0; i < Model.FAQsInfoList.Count; i++)
                {
                    <div class="tab-box @(i==0?"active":"")">
                        <dl class="qlist">
                            @foreach (var item in Model.FAQsInfoList[i].FAQsList)
                            {
                                <dt>@item.Title</dt>
                                <dd>@item.Description</dd>
                            }
                        </dl>
                    </div>
                }
            </div>
        </div>
    </section>
    <section class="s1 s2 container">
        <div class="title-section wow fadeInUp">
            <h2>我们将为用户提供以下技术服务</h2>
        </div>
        <div class="tab-container">
            <div class="tab-header">
                @for (int i = 0; i < Model.ServiceInfoList.Count; i++)
                {
                    <li class="@(i==0?"active":"")">@Model.ServiceInfoList[i].Category.CategoryName </li>
                }
            </div>
            <div class="tab-body">
                @for (int i = 0; i < Model.ServiceInfoList.Count; i++)
                {
                    <div class="tab-box @(i==0?"active":"")">
                        <dl class="qlist">
                            @foreach (var item in Model.ServiceInfoList[i].ServiceList)
                            {
                                <dt>@item.Title</dt>
                                <dd>@item.Description</dd>
                            }
                        </dl>
                    </div>
                }
            </div>
        </div>
    </section>
    <section class="s1">
        <div class="container">
            <div class="title-section wow fadeInUp">
                <h2>告诉我们您需要哪方面的支持</h2>
            </div>
        </div>
        <div class="s3-formcontact">
            <div class="container">
                <div class="row">
                    <div class="col-lg">
                        @{Html.RenderPartial("UcEmail");}
                    </div>
                    <div class="col-lg-auto">
                        <div class="contact">
                            <h4 class="title wow fadeInUp"> 通过电话或邮箱寻求支持</h4>
                            <div class="row">
                                <div class="col-12 col-md-6 col-lg-12">
                                    <div class="item">
                                        <div class="pic"><i class="iconfont icondianhua"></i></div>
                                        <div class="title">服务热线</div>
                                        <div class="val">@company.ServicePhone</div>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 col-lg-12">
                                    <div class="item">
                                        <div class="pic"><i class="iconfont iconyouxiang"></i></div>
                                        <div class="title">联系邮箱                                    </div>
                                        <div class="val">@company.Email</div>
                                        <div class="val">@company.ServiceEmail</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="s1 s4 container">
        <div class="title-section wow fadeInUp">
            <h2>下载</h2>
        </div>
        <div class="tab-container">
            <div class="tab-header">
                @for (int i = 0; i < Model.DownLoadInfoList.Count; i++)
                {
                    <li class="@(i==0?"active":"")">@Model.DownLoadInfoList[i].Category.CategoryName </li>
                }
            </div>
            <div class="tab-body">
                @for (int i = 0; i < Model.DownLoadInfoList.Count; i++)
                {
                    <div class="tab-box @(i==0?"active":"")">
                        <div class="row">
                            @foreach (var item in Model.DownLoadInfoList[i].DownLoadList)
                            {
                                <div class="col-6 col-lg-3">
                                    <div class="item">
                                        <h3 class="title">@item.Title</h3>
                                        <h4>@item.Remark</h4><a class="more" href="@item.FilePath">下载</a>
                                    </div>
                                </div>
                            }
                        </div>
                    </div>
                }
                <div class="downmore"> <a href="#">展开更多<i class="iconfont icondown"></i></a></div>
            </div>
        </div>
    </section>
</div>
@section scripts {
    <script>
        $(function () {
            $(".tab-header li").click(function (e) {
                $(this).addClass("active").siblings().removeClass("active");
                var inum = $(this).index();

                var box = $(this).closest(".tab-header").next(".tab-body").find(".tab-box").eq(inum);
                box.addClass("active");
                box.siblings().removeClass("active");

            })
        });
    </script>
}